
import { Layout, Menu } from 'antd';
import React, { useEffect, useState } from 'react';
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux';
import '../index.css'
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import axios from 'axios';
function getItem(label, key, icon, children, type) {
    return {
        key,
        icon,
        children,
        label,
        type,
    };
}
//Json serve  get 查  post 增   put 改  delete 删  patch 更新
// 高级链表 _embed  axios.get('http://localhost:8000/ports?_embed=contents')
// 子表查父表 _expend axios.get('http://localhost:8000/contents?_embed=ports')

// const items = [
//     getItem('Navigation One', 'sub1', <MailOutlined />, [
//         getItem('Option 1', '1'),
//         getItem('Option 2', '2'),
//         getItem('Option 3', '3'),
//         getItem('Option 4', '4'),
//     ]),
//     getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [
//         getItem('Option 5', '5'),
//         getItem('Option 6', '6'),
//         getItem('Submenu', 'sub3', null, [getItem('Option 7', '7'), getItem('Option 8', '8')]),
//     ]),
//     getItem('Navigation Three', 'sub4', <SettingOutlined />, [
//         getItem('Option 9', '9'),
//         getItem('Option 10', '10'),
//         getItem('Option 11', '11'),
//         getItem('Option 12', '12'),
//     ]),
// ];
const { Sider } = Layout;
const iconType = (icon) => {
    switch (icon) {
        case '/home':
            return <MailOutlined />
        case '/right-manage':
            return <SettingOutlined />
        default:
            return <AppstoreOutlined />
    }
}
function SideMenu(props) {
    const [items, setitems] = useState([])
    const { role: { rights: { checked } } } = JSON.parse(localStorage.getItem('token'))
    useEffect(() => {
        axios.get('/rights?_embed=children').then(res => {
            setitems(res.data.filter(i => i.pagepermisson == 1 && checked.includes(i.key)).map(item => {
                return getItem(item.title, item.key, iconType(item.key), item.children.length > 0 && item.children.filter(i => i.pagepermisson !== undefined).map(chi => {
                    return getItem(chi.title, chi.key)
                }))
            }))
        })
    }, [])
    // const [collapsed, setcollapsed] = useState(false)

    return (
        < Sider trigger={null} collapsible collapsed={props.isCollapsed}>
            <div className="logo">全国新闻发布系统</div>
            <Menu
                theme="dark"
                mode="inline"
                selectedKeys={[props.location.pathname]}

                defaultOpenKeys={['/' + props.location.pathname.split('/')[1]]}
                items={items}
                onClick={(e) => {
                    props.history.push(e.key)
                }}
            />
        </ Sider>
    )
}


const mapStateToProps = ({ collectSet: { isCollapsed } }) => {
    return {
        isCollapsed
    }
}

export default connect(mapStateToProps)(withRouter(SideMenu))